<template>
    <div id="memberAdd">
        <div class="breadcrumb ">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>
                <el-tag>蔬菜管理</el-tag>
            </el-breadcrumb-item>
             <el-breadcrumb-item>
                <el-tag>添加蔬菜</el-tag>
              </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="form">
            <el-form :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" autoComplete="off">
              <el-form-item label="蔬菜名" prop="vname">
                <el-input v-model="ruleForm.vname" placeholder="蔬菜，由汉字组成" style="width:3rem;"></el-input>
              </el-form-item>
              <el-form-item  label="价格(元/斤)" prop="price">
                <el-input  v-model="ruleForm.price" placeholder="请输入金额" style="width:3rem;"></el-input>
              </el-form-item>

               <el-form-item label="品种类型" prop="pzleixing">
                <el-select v-model="ruleForm.pzleixing" placeholder="请选择品种类型">
                  <el-option label="蔬菜水果" value="1"></el-option>
                  <el-option label="禽蛋肉类" value="2"></el-option>
                  <el-option label="熟食豆类" value="3"></el-option>
                  <el-option label="米面粮油" value="4"></el-option>
                </el-select>
              </el-form-item>

               <el-form-item label="销售类型" prop="xlleixing">
                <el-select v-model="ruleForm.xlleixing" placeholder="请选择销售类型">
                  <el-option label="热销" value="1"></el-option>
                  <el-option label="新品" value="2"></el-option>
                  <el-option label="打折" value="3"></el-option>
                </el-select>
              </el-form-item>

             <el-form-item label="供应商" prop="shangjia">
                <el-select v-model="ruleForm.shangjia" placeholder="请选择供应商">
                   <div v-for="(gys,index) in gongyingshang">
                       <el-option :label="gys.gname"  :value="gys.gid"></el-option>
                   </div>    
                </el-select>
              </el-form-item>

              <el-form-item>
                 <el-button type="primary" @click="submitForm('ruleForm')">立即添加</el-button>
                 <el-button @click="resetForm('ruleForm')">重置</el-button>
               </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { getGongyingshang ,addVegetables} from './../../../service/api/index.js'
  export default {
    data() {
      //蔬菜名校验
      var validateVname = (rule,value,callback) =>{
          if (!value) {
              callback(new Error('蔬菜名字不能为空'));
          }
          if (!(/^[\u0391-\uFFE5]+$/.test(value))) {
             callback(new Error('蔬菜名只能由汉字组成'));
          }
          callback();
      };
       //价格校验
      var validatePrice = (rule,value,callback) => {
           if (!value) {
              callback(new Error('价格不能为空'));
           } 
           if (!(/^[0-9]+$/.test(value))) {
               callback(new Error('请输入数字'));
           }
           callback();
      };
      //品种类型校验
     var validatePzleixing = (rule,value,callback) =>{
          if (!value) {
              callback(new Error('请选择品种类型'));
           } 
           callback();
     };

       //销量类型校验
     var validateXlleixing = (rule,value,callback) =>{
          if (!value) {
              callback(new Error('请选择销量类型'));
           } 
           callback();
     };
     //供应商验证
     var validateShangjia = (rule,value,callback) =>{
          if (!value) {
              callback(new Error('请选择供应商'));
           } 
           callback();
     };

      return {
        ruleForm: {
          vname:'',
          price:'',
          xlleixing: '',
          pzleixing:'',
          shangjia:''
        },
        //供应商下拉列表数据
        gongyingshang:[],
        //各字段验证规则
        rules: {
          vname:[
              {validator:validateVname ,trigger:'blur'}
          ],
          price:[
              {validator:validatePrice,trigger:'blur'}
          ],
          xlleixing: [
            { validator:validateXlleixing, trigger: 'change' }
          ],
          pzleixing: [
              { validator:validatePzleixing, trigger: 'change' }
          ],
          shangjia: [
              { validator:validateShangjia, trigger: 'change' }
          ],
        }
      };
    },
    methods: {
     async submitForm(formName) {
            // console.log(this.ruleForm.shangjia);
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
                let res = await addVegetables(this.ruleForm.vname,this.ruleForm.price,this.ruleForm.xlleixing,this.ruleForm.pzleixing,this.ruleForm.shangjia);
               // console.log(res);
                 if (res.status===200) {
                         this.$message({
                              message:'蔬菜添加成功',
                                type:'success'
                             });
                     this.$router.push({name:'goodslist'});
                 }
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
     

            created(){
                 //请求网络数据   调用getVegetables返回promise对象，然后可以调用promise的then方法，返回请求到的数据(response.data)  
                      getGongyingshang().then((response)=>{
                       console.log(response);
                       if(response.status===200){
                       this.gongyingshang = response.data;
                       }
                      
                 }).catch(error=>{
                       // todo......
                      console.log(error);
                 })   //---catch
            }, // ----created
  }
</script>>
<style lang="less" scope>
   #memberAdd{
     width:100%;
     height:100%;
     background-color:#f5f5f5;
   }

    .breadcrumb {
     margin-right: 0.2rem;
     margin-left: 0.2rem;
     margin-top: 0.1rem;
     margin-bottom: 0.1rem;
     background-color:white;
     padding: 0.06rem;
     height:0.6rem;
     border-radius: 4px
   }
    
    .form{
      margin-left: 4rem;
      margin-right: 4rem;
   }
</style>